<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.infodiv {
	display: none;
	/* border:1px solid #000;
		display:block; */
	width: 550px;
	height: 40px;
	position: absolute;
}

.info, .update {
	margin-right: 10px;
	color: blue;
	cursor: pointer;
}

table {
	margin-top: 20px;
	border: 1px solid #000;
	text-align: center;
}
table tr {
	height: 30px;
	font-size: 15px;
}

table tr td {
	width: 200px;
	border: 1px solid #000;
}

.border {
	border: 1px solid #000;
}

label, .goodsid {
	vertical-align: middle;
}

.border2 {
	border: 0px;
}

input {
	border: 0px;
	text-align: center;
	width: 65px;
	background-color: #cfcfcf;
}

#ipage {
	color: #4f4f4f;
	width: 20px;
	height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	background-color: #E5E5E5;
	cursor: pointer;
}

#apage {
	color: #4f4f4f;
	width: 20px;
	height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	background-color: #EED8AE;
	cursor: pointer;
}

#tpage {
	color: #4f4f4f;
	width: 40px;
	height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	background-color: #EED8AE;
	cursor: pointer;
}

#dpage {
	color: #4f4f4f;
	width: 50px;
	height: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	background-color: #EED8AE;
	cursor: pointer;
}

.update_content {
	width: 70px;
	line-height: 20px;
	height: 20px;
	color: white;
	cursor: pointer;
	float: right;
	margin:0 auto;
	background-color: black;
	border: solid 1px red;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
	text-align: center;
}

#info_content {
	margin:0 auto;
	width: 70px;
	line-height: 20px;
	height: 20px;
	float: left;
	color: white;
	background-color: black;
	border: solid 1px red;
}

.update_content_true {
	margin: 0 auto;
	width: 70px;
	line-height: 20px;
	height: 20px;
	float: right;
	color: white;
	background-color: black;
	border: solid 2px red;
	cursor: pointer;
}

tr td img {
	width: 25px;
	height: 25px;
}
</style>
</head>
<body>
	<div style="width: 1100px; margin: 0 auto;">
		<h4 style="margin-left: 20px;">类别列表</h4>
		<table cellpadding="0" cellspacing="0"
			style="border-collapse: collapse;">
			<tr style="font-weight: bold;">
				<td>类别ID</td>
				<td>分类名称</td>
				<td>分类描述</td>
				<td>父类ID</td>
				<td>导航显示</td>
				<td>页面显示</td>
				<td>积分等级</td>
				<td>操作</td>
			</tr>
			<c:forEach items="${pageBean}" var="list">
				<tr>
					<td><input id="" style="width: 30px;" class="goodsid"
						type="radio" value="1" /> <label style="line-height: 15px;">${list.catid}</label></td>
					<td><input id="" class="goodsname" type="text"
						value="${list.catname}" /></td>
					<td><input id="" class="goodssn" type="text"
						value="${list.catdesc}" /></td>
					<td><input id="" class="marketprice" type="number"
						value="${list.parentid}" /></td>
					<td><img src="${list.showinnav}"></td>
					<td><img src="${list.isshow}"></td>
					<td><input id="" class="goodssn" type="text"
						value="${list.grade}" /></td>
					<td><div id="info_content" class="info">详情</div>
						<div id="" class="update_content">修改</div>
						<div id="" class="update_content_true">确定</div></td>

				</tr>
			</c:forEach>
		</table>
	</div>
	<div
		style="width: 750px; margin-left: 350px; font-size: 15px; margin-top: 15px;">
		第&nbsp;${pb.pc}&nbsp;页&nbsp;共&nbsp;${pb.tp}&nbsp;页
		<c:if test="${pb.pc > 1 }">
			<a target="1" class="page" id="tpage">首页</a>
			<a target="${pb.pc-1}" class="page" id="dpage">上一页</a>
		</c:if>
		<%-- 计算begin、end --%>
		<c:choose>
			<%-- 如果总页数不足5页，那么把所有的页数都显示出来！ --%>
			<c:when test="${pb.tp <= 5 }">
				<c:set var="begin" value="1" />
				<c:set var="end" value="${pb.tp }" />
			</c:when>
			<c:otherwise>
				<%-- 当总页数>10时，通过公式计算出begin和end --%>
				<c:set var="begin" value="${pb.pc-5 }" />
				<c:set var="end" value="${pb.pc+5 }" />
				<%-- 头溢出 --%>
				<c:if test="${begin < 1 }">
					<c:set var="begin" value="1" />
					<c:set var="end" value="15" />
				</c:if>
				<%-- 尾溢出 --%>
				<c:if test="${end > pb.tp }">
					<c:set var="begin" value="${pb.tp -4 }" />
					<c:set var="end" value="${pb.tp }" />
				</c:if>
			</c:otherwise>
		</c:choose>
		<%-- 循环遍历页码列表 --%>
		<c:forEach var="i" begin="${begin }" end="${end }">
			<c:choose>
				<c:when test="${i eq pb.pc }">
					<!--当前页不要超链接  -->
					<span id="ipage">${i}</span>
				</c:when>
				<c:otherwise>
					<a target="${i}" class="page"><span id="apage">${i}</span></a>
				</c:otherwise>
			</c:choose>

		</c:forEach>


		<!-- 首页共页上一页下页尾页 -->

		<c:if test="${pb.pc < pb.tp }">
			<a target="${pb.pc+1}" class="page" id="dpage">下一页</a>
			<a target="${pb.tp}" class="page" id="tpage">尾页</a>
		</c:if>
	</div>
	<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
	<script type="text/javascript">
		$("input").attr("disabled", "disabled");
		$(".update_content_true").hide();
		$(".page").click(function() {
			var pc = $(this).attr("target");
			$.getJSON("../CategoryServlet?method=quaryAllCaregory", {
				pc : pc
			}, function(data) {
				if (data == "0")
					$("#rightdiv").load("../yf/findcategory.jsp");
			});
		});
		$(".update_content").click(function() {

			$("input").removeAttr("disabled");
			$("input").css("background-color", "#000");
			$("input").css("color", "#fff");
			$(".update_content").hide();
			$(".update_content_true").show();

		})
		$(".update_content_true")
				.click(
						function() {

							var up = $(".update_content").attr("id");

							var goodsid = $(this).parent().parent().find(
									"td .goodsid").val();
							var goodssn = $(this).parent().parent().find(
									"td .goodssn").val();
							var goodsname = $(this).parent().parent().find(
									"td .goodsname").val();
							var marketprice = $(this).parent().parent().find(
									"td .marketprice").val();
							var goodsnumber = $(this).parent().parent().find(
									"td .goodsnumber").val();
							var isnew = $(this).parent().parent().find(
									"td .isnew").val();
							var ishot = $(this).parent().parent().find(
									"td .ishot").val();
							var giveintegral = $(this).parent().parent().find(
									"td .giveintegral").val();

							if (marketprice >= 0) {
								var flag = confirm("真的要修改吗?");
								if (flag) {
									$
											.getJSON(
													"../GoodsServlet?method=updateAllGoods",
													{
														goodsid : goodsid,
														goodssn : goodssn,
														goodsname : goodsname,
														marketprice : marketprice,
														goodsnumber : goodsnumber,
														isnew : isnew,
														ishot : ishot,
														giveintegral : giveintegral
													},
													function(date) {
														alert("修改成功!");
														$(".update_content")
																.show();
														$(
																".update_content_true")
																.hide();
														$("input").attr(
																"disabled",
																"disabled");
													})
								} else {
									$("input").attr("disabled", "disabled");
								}
							} else {
								alert("请输入大于0的数字");
							}

						})
	</script>

</body>
</html>